import React, { useState } from 'react';
import {
  Box,
  Button,
  Card,
  CardBody,
  Flex,
  Heading,
  IconButton,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaVolumeUp, FaStar, FaRegStar } from 'react-icons/fa';
import { Word } from '../../types';

interface WordCardBaseProps {
  word: Word;
  isFavorite: boolean;
  onToggleFavorite: () => void;
  onPlayAudio: () => void;
  onShowDetail: () => void;
}

const WordCardBase: React.FC<WordCardBaseProps> = ({
  word,
  isFavorite,
  onToggleFavorite,
  onPlayAudio,
  onShowDetail,
}) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const cardBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  const handleFlip = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <Card
      bg={cardBg}
      border="1px"
      borderColor={borderColor}
      borderRadius="xl"
      boxShadow="lg"
      height="300px"
      cursor="pointer"
      onClick={handleFlip}
      position="relative"
    >
      <CardBody p={6} display="flex" flexDirection="column">
        {isFlipped ? (
          <>
            <Flex justifyContent="space-between" alignItems="center" mb={4}>
              <Heading as="h3" size="lg">
                {word.translation}
              </Heading>
              <IconButton
                icon={isFavorite ? <FaStar /> : <FaRegStar />}
                aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                onClick={e => {
                  e.stopPropagation();
                  onToggleFavorite();
                }}
                variant="ghost"
              />
            </Flex>

            <Text fontSize="md" mb={4}>
              {word.definition}
            </Text>

            <Box mt="auto">
              <Text fontSize="sm" color="gray.500" mb={2}>
                Example:
              </Text>
              <Text fontSize="sm" fontStyle="italic">
                {word.example}
              </Text>
              <Text fontSize="sm" fontStyle="italic" color="gray.500" mt={1}>
                {word.exampleTranslation}
              </Text>
            </Box>
          </>
        ) : (
          <>
            <Flex justifyContent="space-between" alignItems="center" mb={4}>
              <Heading as="h3" size="lg">
                {word.word}
              </Heading>
              <IconButton
                icon={<FaVolumeUp />}
                aria-label="Play pronunciation"
                onClick={e => {
                  e.stopPropagation();
                  onPlayAudio();
                }}
                variant="ghost"
              />
            </Flex>

            <Text fontSize="md" color="gray.500" mb={4}>
              {word.partOfSpeech}
            </Text>

            <Box mt="auto">
              <Button
                size="sm"
                variant="outline"
                width="full"
                onClick={e => {
                  e.stopPropagation();
                  onShowDetail();
                }}
              >
                Show Details
              </Button>
            </Box>
          </>
        )}
      </CardBody>
    </Card>
  );
};

const WordCard = React.memo(WordCardBase, (prevProps, nextProps) => {
  // Custom comparison function for React.memo
  return prevProps.word.id === nextProps.word.id && prevProps.isFavorite === nextProps.isFavorite;
});

export default WordCard;
